import add from './award-add.js';//模块静态导入
import update from './award-update.js';
import del from './award-Del.js';

let index = [" ","金牌","银牌","铜牌"];
let datagrid = document.querySelector(".datagrid");
let search = document.forms.searchForm;
let sportingId = search.sportingId;
let pagination = document.querySelector(".pagination");

let paginationFormat = function(data){
    let html = ` <li class="page-item" data-page="${data.current-1}">
                <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>`;
    for (let i of data.pages){
        html += `<li class="page-item ${i==data.current?'active':''}" data-page=${i}><a class="page-link" href="javascript:void(0);">${i}</a></li>`;
    }
    html += ` <li class="page-item" data-page="${data.current+1}">
                <a class="page-link" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>`;
    pagination.innerHTML = html;
    for(let li of pagination.children){
        li.onclick = function(){
            loadData(li.dataset.page);
        }
    }
}

fetch("sporting-list.let").then(r=>r.json()).then((data)=>{
    data.forEach(item=>{
        sportingId.add(new Option(item.sportingName,item.sportingId));
    });
});
let params = new URLSearchParams();
let loadData = function(current=1,maxRecord = 4){
    params.set("current",current);
    params.set("maxRecord",maxRecord);
    fetch("award-page.let?"+params.toString()).then((r)=>r.json()).then((data)=>{
        console.debug(data);
        paginationFormat(data);
        datagrid.innerHTML = "";
        data.list.forEach((item)=>{
            let tr = document.createElement("tr");
            tr.innerHTML=` 
            <td>${item.sportingName}</td>
            <td>${item.countryName}</td>
            <td>${item.athletesName}</td>
            <td>${index[item.awardRanking]}</td>
            <td>${item.awardGrade}</td>
            <td>${item.awardDate}</td>
            <td style="width: 10em;">
                <div class="btn-group ml-2">
                    <button type="button" class="btn btn-primary _update">修改</button>
                    <button type="button" class="btn btn-danger _delete">删除</button>
                </div>
            </td>`;
            datagrid.appendChild(tr);
            tr.querySelector("._update").onclick = function (){
                update(item);
            }
            tr.querySelector("._delete").onclick = function (){
                del(item);
            }
        });
    }).catch((e)=>{
        console.error(e);
    })
}
loadData();
search.onsubmit = function(event){
    event.stopPropagation();
    event.preventDefault();
    params = new URLSearchParams(new FormData(search));
    loadData(1);
}
window.addEventListener("message",function(e){
    console.debug(e);
    if(e.data == "loadData"){
        loadData();
    }
})
add();